<template>
  <div class="shop">
    <el-button-group>
      <el-button @click="changeStatus(1)">全部</el-button>
      <el-button @click="changeStatus(5)">发券中</el-button>
      <el-button @click="changeStatus(10)">已结束</el-button>
    </el-button-group>

    <div class="search">
      <div class="search_btn">
        <el-input class="input" v-model="keywords" placeholder="输入小店名称或账号搜索" clearable></el-input>
        <el-button type="primary" @click="searchvouchlist">搜索</el-button>
      </div>
    </div>

    <el-table
      class="vouch_table"
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="id" label="ID"></el-table-column>

      <el-table-column prop="shopId" label="小店名称"></el-table-column>
      <el-table-column prop="username" label="小店主账号" width="140"></el-table-column>
      <el-table-column label="券信息" width="140">
        <template slot-scope="scope">{{scope.row.name}}</template>
      </el-table-column>
      <el-table-column label="发券数/领取数" width="120">
        <template slot-scope="scope">{{scope.row.voucherQuantity}}/{{scope.row.voucherGrant}}</template>
      </el-table-column>
      <el-table-column label="会员折扣" width="140">
        <template slot-scope="scope">
          <p
            v-if="scope.row.vipPrice"
          >{{scope.row.vipPrice/scope.row.salePrice *100}}%</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="有效时间" width="280">
        <template slot-scope="scope">{{parseTime(scope.row.useStartTime)}}-{{parseTime(scope.row.useEndTime)}}</template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <p v-if="scope.row.status==1">未发布</p>
          <p v-if="scope.row.status==5">发券中</p>
          <p v-if="scope.row.status==10">已发完</p>
          <p v-if="scope.row.status==15">已结束</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="170" fixed="right">
        <template slot-scope="scope">

          <el-button size="mini" type="danger" @click="openvouchersDetail(scope.row.id)">领取记录</el-button>
          <el-button size="mini" @click="deleteVouchers(scope.row.id)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="page"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import { cashCouponPageList,cashCouponDelete } from "@/api/others";
export default {
  data() {
    return {
      keywords: "",
      status: "",
      page:1,
      size:10,
      total:0,
      couponType:2,
      tableData: []
    };
  },
  mounted() {
    this.getactivityPreferentialCouponListData();
  },
  methods: {
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    changeStatus(e) {
      this.status = e;
      if (e === 1) {
        this.status = "";
      } else {
        this.status = e;
      }

      //重新获取小店商品管理列表
      this.getactivityPreferentialCouponListData();
    },
    pageChange(page) {
      this.page = page;
      this.getactivityPreferentialCouponListData();
    },
    //根据关键词重新获取小店
    searchvouchlist() {
      this.page = 1;
      this.getactivityPreferentialCouponListData();
    },
    //查看详情
    openvouchersDetail(id) {

      this.$router.push({
        path: "./vouchersgetterlist",
        query: { cid: id }
      });
    },

    deleteVouchers(id){
         this.$confirm("确定删除?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //移除小店
        this.getActivityDeletePreferentialData(id);
      });
    },
     //删除满减券数据
     async getActivityDeletePreferentialData(id){
          let  res = await cashCouponDelete(id)
          if(res.code  === 200){
               this.$message.success('成功删除满减券')
               this.getactivityPreferentialCouponListData()
          }else{
            this.$message.error(res.message)
          }
     },
    //获取满减券列表
    async getactivityPreferentialCouponListData() {
      let res = await cashCouponPageList({
        keywords: this.keywords,
        status: this.status,
        pageNum:this.page,
        pageSize:this.size,
        couponType:this.couponType
      });
      console.log(res);
      if (res.code === 200) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  position: relative;

  .search {
    float: right;
    .input {
      width: 200px;
    }
  }
  .shop_title {
    font-weight: 700;
  }
  .vouch_table {
    margin-top: 20px;
  }
  .pagination{
     float: right;
  }
}
</style>
